<template>
    <div>
        <van-nav-bar title="首页" left-text="" left-arrow @click-left="onClickLeft" />
    </div>

    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <div class="search-div">
                <van-field
                v-model="username"
                name="目的地"
                left-icon="search"
                placeholder="搜索目的地/充电站"
                :rules="[{ required: true, message: '' }]"/>
            </div>
        </van-cell-group>
    </van-form>
    
    <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab title="距离最近"  name="0"></van-tab>
        <van-tab title="价格最低"  name="1"></van-tab>
        <van-tab title="评价最好"  name="2"></van-tab>
        <van-tab title="人气最高"  name="3"></van-tab>
    </van-tabs>
    <div class="custom-line"></div>
    <div class="button-div">
        <div style="margin-right: 5px;">
        <van-button type="default" size="small" :class="{ 'is-blue': isBlue }" @click="makeBlue">免费停车</van-button>
        </div>
        <div style="margin-right: 5px;">
        <van-button type="default" size="small" :class="{ 'is-blue': isBlue1 }" @click="makeBlue1">大型商场</van-button>
        </div>
        <div style="margin-right: 5px;">
        <van-button type="default" size="small" :class="{ 'is-blue': isBlue2 }" @click="makeBlue2">休息室</van-button>
        </div>
        <div style="margin-right: 5px;">
        <van-button type="default" size="small" :class="{ 'is-blue': isBlue3 }" @click="makeBlue3">卫生间</van-button>
        </div>
        <div style="margin-right: 5px;">
        <van-button type="default" size="small" :class="{ 'is-blue': isBlue4 }" @click="makeBlue4">卫生间</van-button>
        </div>
    </div>
    <div style="background-color: whitesmoke;padding: 16px;">
        <div v-for="station in stations" :key="station.id" style="background-color: white;margin-bottom: 5px;height: 100px;" @click="StationDetailPage()">
            <van-space :align="align"  >
                <div style="height: 48px; width: 200px;">
                    <h4 style="margin-top: 3px;margin-bottom: 3px">{{station.stationName}}</h4>
                    <div style="display: flex;">
                        <img style="height: 20px;" alt="Vue logo" src="../../images/24hours.png">
                        <div style="margin-left: 3px;"> 小时 | 非专用</div>
                    </div>
                </div>
                <div style="height: 48px; width: auto;background-color: white;padding-top: 5px">
                    <div style="color: blue;font-weight: bolder;font-size: 18px;">{{station.price}} 元/度</div>
                    <div style="color: lightgray;font-weight: bold;font-size: 14px;text-decoration: line-through;">{{station.originalPrice}} 元/度</div>
                </div>
            </van-space> 
            <div style="display: flex;height: 20px;">
                <div style="background-color: red;padding-left: 5px;padding-right: 5px;margin-right: 5px;color: white;font-size: 12px;border-radius: 5px;">空：{{station.availableGuns}} 个</div>
              <div style="background-color: forestgreen;padding-left: 5px;padding-right: 5px;margin-right: 5px;color: white;font-size: 12px;border-radius: 5px;">共：{{station.countGuns}} 个</div>
            </div>
            <div class="station-footer" style="display: flex;margin-bottom: 5px;padding-top: 10px;">
                <img style="height: 20px;" src="../../images/map.png">
                <div style="margin-left: 3px;font-size: 12px;"> {{station.address}}</div>
                <div style="display: flex;margin-left:auto;margin-right: 0%;">
                    <div style="text-align: right;"><span>{{station.distance}}</span><span>{{station.distanceUnit}}</span></div>
                    <!-- <img style="height: 20px;" src="../../images/guid.png"> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import router from '@/router';
import { ref } from 'vue';
import axios from "axios";
import {showFailToast} from "vant";
import { StationList,StationPageList} from '@/api/station.js'

const onClickLeft = () => history.back();
const onClickTab = ({ name }) => getStations(name);
const username = ref('');
const active = ref(0);
const align = ref('center');
// const value1 = ref('');
const stations = ref([]);
const latitude=ref(23.01797);
const longitude=ref(113.74866);
const search = ref({
  pageSize: 10,
  stationName: '',
  currentPage: 1,
  latitude:23.115149,
  longitude:113.254576
})




initData();
function initData(){
  getLocation();
  getStationPageList();
}

function getStations(name) {
  console.info('获取到' + name + '的站点')
  if (name === '0'){
    getStationPageList();
  }else if (name === '1'){
    getStationList();
  }
}

function getStationPageList(){
  StationPageList(search.value)
      .then(res => {
        console.info( res.data)
        if (res.data.code === 200000) {
          stations.value = res.data.data.data;
          } else {
          console.info('没有获取到了站点数据')
          }
      }).catch(error => {
        console.error('获取站点数据失败', error)
      });
}



function getStationList(){
  console.info('获取到价格最低的站点')
  const reqData={lon:longitude.value,lat:latitude.value}
  // const reqData={lon:113.74866,lat:23.01797}
  StationList(reqData)
      .then(res => {
        console.info( res.data)
        if (res.data.code === 200000) {
          stations.value = res.data.data.data;
        } else {
          console.info('没有获取到了站点数据')
        }
      }).catch(error => {
        console.error('获取站点数据失败', error)
      });
}

function onSubmit(){
    console.info('提交');
}

function StationDetailPage(){
    console.info("站点详情跳转")
    router.push('/station/detail');
}



// 定义一个响应式变量来跟踪按钮是否应该变蓝
const isBlue = ref(false);
const isBlue1 = ref(false);
const isBlue2 = ref(false);
const isBlue3 = ref(false);
const isBlue4 = ref(false);
// 点击按钮后修改按钮的样式，使它变蓝
function makeBlue() { 
    if(isBlue.value==false){
        isBlue.value = true;
    }else{
        isBlue.value = false
    }
}
function makeBlue1() { 
    if(isBlue1.value==false){
        isBlue1.value = true;
    }else{
        isBlue1.value = false
    }
}
function makeBlue2() { 
    if(isBlue2.value==false){
        isBlue2.value = true;
    }else{
        isBlue2.value = false
    }
}
function makeBlue3() { 
    if(isBlue3.value==false){
        isBlue3.value = true;
    }else{
        isBlue3.value = false
    }
}
function makeBlue4() { 
    if(isBlue4.value==false){
        isBlue4.value = true;
    }else{
        isBlue4.value = false
    }
}



function getLocation(){
  try {
    const request = axios.create({
      baseURL: "https://ipapi.co",
      timeout: 10000
    })
    request.get('/json/')
        .then(response => {
          console.log(response.data.longitude); // 这里可以访问到返回的数据
          console.log(response.data.latitude); // 这里可以访问到返回的数据
          // longitude.value = response.data.longitude;
          // latitude.value = response.data.latitude;
        })
        .catch(error => {
          console.error("Error fetching data:", error);
        });
  } catch (error) {
    showFailToast('获取用户当前经纬度失败')
  }
}

</script>

<style>
.search-div{
    display: flex;
}
.button-div{
    margin-top: 10px;
    margin-left: 16px;
    display: flex;
}
.is-blue {
  background-color: lightskyblue; /* 这里指定蓝色样式 */
  /* 可以根据需要添加更多样式属性 */
}
.custom-line {
    margin-top: 3px;
    border-bottom: 0.5px solid lightgray; /* 黑色细线 */
    width: 100%; /* 或者根据需要设置宽度 */
}
.strike-line {
  /* 定义横线的样式，这里使用了一个字符来模拟横线 */
  font-weight: bold; /* 可以加粗以更明显地显示横线 */
  margin-left: 5px; /* 可以调整横线与文字之间的距离 */
}
</style>